<breadcrumb />

<mat-card class="demo-dialog-card">
  <mat-card-content>
    <h2>Bottom sheet demo</h2>

    <button matButton="elevated" color="primary" (click)="openComponent()">
      Open component sheet
    </button>
    <button matButton="elevated" color="accent" (click)="openTemplate()">Open template sheet</button>

    <h2>Options</h2>

    <p>
      <mat-checkbox [(ngModel)]="config.hasBackdrop">Has backdrop</mat-checkbox>
    </p>

    <p>
      <mat-checkbox [(ngModel)]="config.disableClose">Disable close</mat-checkbox>
    </p>

    <p>
      <mat-form-field>
        <input matInput [(ngModel)]="config.backdropClass" placeholder="Backdrop class" />
      </mat-form-field>
    </p>

    <p>
      <mat-form-field>
        <mat-select placeholder="Direction" [(ngModel)]="config.direction">
          <mat-option value="ltr">LTR</mat-option>
          <mat-option value="rtl">RTL</mat-option>
        </mat-select>
      </mat-form-field>
    </p>
  </mat-card-content>
</mat-card>

<ng-template let-bottomSheetRef="bottomSheetRef">
  <mat-nav-list>
    @for (action of [1, 2, 3]; track $index) {
      <mat-list-item (click)="bottomSheetRef.dismiss()">
        <mat-icon matListItemIcon>folder</mat-icon>
        <span matListItemTitle>Action {{ action }}</span>
        <span matLine>Description</span>
      </mat-list-item>
    }
  </mat-nav-list>
</ng-template>
